<template>
  <uni-page-wrapper>
    <uni-page-body>
      <uni-view class="paddingView">
        <uni-view class="userHeader">
          <uni-view class="left">
            <uni-view class="top">
              <uni-view class="b">{{ $t("home.Hello") }}</uni-view>
              <uni-view class="s"> {{ username }}</uni-view>
            </uni-view>
            <uni-view class="bottom">{{ $t("home.Choose Amazon,choose Wealth") }}</uni-view>
          </uni-view>
          <uni-image class="right" @click="toMe">
            <div
              style="
                background-image: url('/static/img/avatar.42fc3f14.png');
                background-position: 0% 0%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <img src="/static/img/avatar.42fc3f14.png" />
          </uni-image>
        </uni-view>
        <uni-view class="card">
          <uni-view class="topMsg">
            <uni-view class="left">
              <uni-view class="t">{{ $t("home.Total assets") }}</uni-view>
              <uni-view class="b">{{ total }} </uni-view>
            </uni-view>
            <uni-view class="right">
              <uni-view class="item" @click="toTopUp">{{ $t("home.Top up") }}</uni-view>
              <uni-view class="item" @click="toWithdraw">{{ $t("home.Withdraw") }}</uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="line"> </uni-view>
          <uni-view class="navs">
            <uni-view class="item">
              <uni-view class="t">{{ YesEarnings }}</uni-view>
              <uni-view class="b">{{ $t("home.Yesterdays earnings") }}</uni-view>
            </uni-view>
            <uni-view class="item">
              <uni-view class="t">{{ income }}</uni-view>
              <uni-view class="b">{{ $t("home.Cumulative income") }}</uni-view>
            </uni-view>
            <uni-view class="item">
              <uni-view class="t">{{ todayEarning }}</uni-view>
              <uni-view class="b">{{ $t("home.Todays earnings") }}</uni-view>
            </uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="routerNavs">
          <uni-view class="item" @click="toFinance">
            <uni-image class="top">
              <div
                style="
                  background-image: url('/static/index/nav1.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              ></div>
              <img src="/static/index/nav1.png" />
            </uni-image>
            <uni-view class="bottom">{{ $t("home.Finance") }}</uni-view>
          </uni-view>
          <uni-view class="item" @click="toTopUp">
            <uni-image class="top">
              <div
                style="
                  background-image: url('/static/index/nav2.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              ></div>
              <img src="/static/index/nav2.png" />
            </uni-image>
            <uni-view class="bottom">{{ $t("home.Top up") }}</uni-view>
          </uni-view>
          <uni-view class="item" @click="toWithdraw">
            <uni-image class="top">
              <div
                style="
                  background-image: url('/static/index/nav3.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              ></div>
              <img src="/static/index/nav3.png" />
            </uni-image>
            <uni-view class="bottom">{{ $t("home.Withdraw") }}</uni-view>
          </uni-view>
          <uni-view class="item" @click="toInvitation">
            <uni-image class="top">
              <div
                style="
                  background-image: url('/static/index/nav4.png');
                  background-position: 0% 0%;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                "
              ></div>
              <img src="/static/index/nav4.png" />
            </uni-image>
            <uni-view class="bottom">{{ $t("home.Invitation") }}</uni-view>
          </uni-view>
        </uni-view>
        <uni-view class="notice" @click="changeMask">
          <uni-image class="icon">
            <div
              style="
                background-image: url('');
                background-position: 0% 0%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
              "
            ></div>
            <img
              src=""
            />
          </uni-image>
          <uni-view class="msg">
            <uni-view
              class="uni-noticebar"
              style="background-color: rgb(255, 255, 255)"
            >
              <uni-view
                class="uni-noticebar__content-wrapper uni-noticebar__content-wrapper--scrollable"
              >
                <uni-view
                  id="Uni_ef3m"
                  class="uni-noticebar__content uni-noticebar__content--scrollable"
                >
                  <uni-text
                    id="Uni_fur6"
                    class="uni-noticebar__content-text uni-noticebar__content-text--scrollable"
                    style="
                      color: rgb(0, 0, 0);
                      animation-play-state: running;
                      animation-delay: -43.6s;
                      animation-duration: 43.6s;
                    "
                  >
                    <span> {{ news }}</span>
                  </uni-text>
                </uni-view>
              </uni-view>
            </uni-view>
          </uni-view>
          <uni-view class="more">{{ $t("home.View") }}</uni-view>
        </uni-view>
        <uni-view class="taskTit">{{ $t("home.Task") }}</uni-view>

        <uni-view class="level">
          <uni-view
            class="item"
            v-for="item in levelList"
            :key="item.level"
            @click="toPage(item)"
          >
            <uni-view class="top">
              <uni-view class="left">
                <uni-view class="t">{{ item.title }}</uni-view>
                <uni-view class="b">{{ $t("home.Exclusive channel") }}</uni-view>
              </uni-view>
              <uni-view class="right" v-if="item.state === 1">{{ $t("home.Unlock") }}</uni-view>
              <uni-view class="right" v-if="item.state === 2">{{ $t("home.Overdue") }}</uni-view>
            </uni-view>
            <uni-view
              class="bottom"
              :style="getBg(item.image)"
            >
              <uni-image class="icon" v-if="item.state === 1">
                <div
                  style="
                    background-image: url('');
                    background-position: 0% 0%;
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                  "
                ></div>
                <img
                  src=""
                />
              </uni-image>
              <uni-view class="b" v-if="item.state === 1"
                >{{ $t("home.To be unlocked") }}</uni-view
              >
            </uni-view>
          </uni-view>
        </uni-view>

        <uni-view class="colorList">
          <uni-view
            @click="toGuidance"
            class="item"
            :style='getImg("bot1.png")'
          >
          </uni-view>
          <uni-view
            @click="toCooperation"
            class="item"
            :style='getImg("bot2.png")'
          >
          </uni-view>
          <uni-view
            @click="toIntroduction"
            class="item"
            :style='getImg("bot3.png")'
          >
          </uni-view>
          <uni-view
            @click="toRules"
            class="item"
            :style='getImg("bot4.png")'
          >
          </uni-view>
        </uni-view>
        <uni-view class="mask" v-if="isShowMask">
          <uni-view class="box">
            <uni-view class="msg">{{ news }}</uni-view>
            <uni-view class="btn" @click="changeMask">{{ $t("home.OK") }}</uni-view>
          </uni-view>
        </uni-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from "@/store/service.js";
export default {
  data() {
    return {
      username: "",
      YesEarnings: 0,
      income: 0,
      todayEarning: 0,
      total: 0,
      isShowMask: false,
      news: "news news news news",
      newsList: [],
      levelList: [
        {
          level: "VIP1",
          description: "Exclusive channel",
          state: "lock",
        },
        {
          level: "VIP2",
          description: "Exclusive channel",
          state: "Unlock",
        },
        {
          level: "VIP3",
          description: "Exclusive channel",
          state: "Unlock",
        },
        {
          level: "VIP4",
          description: "Exclusive channel",
          state: "Unlock",
        },
      ],
    };
  },
  onShow() {
    this.loadHome();
  },
  methods: {
	  getBg(image){
		return "background-image: url('"+image+"')";  
	  },
	  getImg(name){
		return this._i18n.locale=="en"?"background-image: url('/static/index/"+name+"')":"background-image: url('/static/"+name+"')"  
	  },
    loadHome() {
      service.auth(this, service.api.app_index, {}, function (self, res) {
        self.username = res.username;
        self.news = res.alert;
        self.levelList = res.list;
        self.todayEarning = res.b_amount;
        self.YesEarnings = res.z_amount;
        self.income = res.l_amount;
        self.total = res.money;
        self.newsList = res.news;
      });
    },
    toMe() {
      uni.reLaunch({
        url: "/pages/me/me",
      });
    },
    toTopUp() {
      uni.navigateTo({
        url: "/pages/topUp/top-Up",
      });
    },
    toWithdraw() {
      uni.navigateTo({
        url: "/pages/withDraw/withDraw",
      });
    },
    toFinance() {
      uni.navigateTo({
        url: "/pages/finance/finance",
      });
    },
    toInvitation() {
      uni.navigateTo({
        url: "/pages/invitation/invitation",
      });
    },
    toGuidance() {
      uni.setStorageSync("newsMsg", this.newsList[0]);
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
    toCooperation() {
      uni.setStorageSync("newsMsg", this.newsList[1]);
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
    toIntroduction() {
      uni.setStorageSync("newsMsg", this.newsList[2]);
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
    toRules() {
      uni.setStorageSync("newsMsg", this.newsList[3]);
      uni.navigateTo({
        url: "/pages/news/news",
      });
    },
    toPage(item) {
      if (item.state === 0) {
        uni.setStorageSync("level", item.id);
        uni.reLaunch({
          url: "/pages/task/task",
        });
      } else if (item.state === 2) {
        uni.showToast({
          title: "Experience Zone be overdue",
        });
      } else {
        uni.navigateTo({
          url: "/pages/upVIP/up-VIP",
        });
      }
    },
    changeMask() {
      this.isShowMask = !this.isShowMask;
    },
  },
};
</script>

<style>
@import url(./home.css);
</style>